<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>北大青鸟官网切换效果</title>
		<style>
			li {
				list-style: none;
			}

			#shiftImg {
				height: 450px;
				max-width: 1500px;
				overflow: hidden;
				margin-left: -360px;
				position: relative;
			}
			#shiftImg img{
				height: 450px;
				max-width: 1500px;
			}

			#shiftImg #adv,
			#shiftImg #navImg {
				display: flex;
			}

			#shiftImg #adv li {
				display: none;
			}

			#shiftImg #adv li.current {
				display: block;
			}

			#shiftImg #navImg {
				height: 20px;
				width: 130px;
				background-color: rgba(100, 100, 100, 0.5);
				position: absolute;
				left: 1000px;
				bottom: 30px;
			}

			#shiftImg #navImg {
				height: 26px;
				line-height: 26px;
				margin: 0 auto;
				border-radius: 13px;
				padding-right: 30px;
			}

			#shiftImg #navImg li {
				height: 12px;
				width: 12px;
				border-radius: 50%;
				background-color: white;
				margin-left: 15px;
				text-align: center;
				margin-top: 7px;
				
			}

			#shiftImg #navImg li:hover {
				background-color: skyblue;
				cursor: pointer;
			}
			#shiftImg #navImg li.current {
				background-color: skyblue;
			}
		</style>
		<script src="../js/jquery-3.4.1.min.js"></script>
		<script>
			$(function(){
				var index = 0;//当前显示的第几张图片
				var timer;//定时器对象
				function startShift(){ 
					timer=window.setInterval(function(){
						index=++index%4;//给index+1,保证index不会超过4
						changeImg();
					},1800);
				}
				startShift();
				
				$("#shiftImg #adv li").hover(
					function(){
						window.clearInterval(timer);
					},
					function(){
						startShift();
					}
				);
				$("#shiftImg #navImg li").hover(function(){
					window.clearInterval(timer);
					index=$(this).index();
					changeImg();
				},function(){
					startShift();
				});
				function changeImg(){ 
					$("#shiftImg #adv li:not(:eq("+index+"))").removeClass("current");
					$("#shiftImg #adv li:eq("+index+")").addClass("current");
					
					$("#shiftImg #navImg li:not(:eq("+index+"))").removeClass("current");
					$("#shiftImg #navImg li:eq("+index+")").addClass("current");
					
					
					//$("#shiftImg #adv li:eq("+index+")").show();
					///$("#shiftImg #adv li:eq("+index+")").css("display","block");
					//$("#adv li:eq("+index+")").show(100);
					//$("#adv li").eq(index)
				}
			});
		</script> 
			 
	</head>
	<body>
		<div id="shiftImg">
			<ul id="adv" >
				<li class="current"><a href="#"><img src="../day12/1.png"
							alt=""></a></li>
				<li ><a href="#"><img src="../day12/2.jpg" alt=""></a></li>
				<li><a href="#"><img src="../day12/3.jpg" alt=""></a></li>
				<li><a href="#"><img src="../day12/4.png" alt=""></a></li>
			</ul>
			<ul id="navImg">
				<li  class="current"></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
